<template>
    <div id="shopSafe">
        <header class="shopSafe">
<!--            <img src="../assets/img/箭头左.png" @click="$router.go(-1)" alt="">-->
<!--            <span>食品监督安全公示</span>-->
          <Top><p>食品监督安全公示</p></Top>
        </header>

        <section id="scroll_section" class="scroll_container">
            <section >
                <section class="shop_status_container">
                    <header >食品监督安全公示</header>
                    <section class="shop_statu_detail">
                        <div >
                            <svg  class="res-well">
                                <use xmlns:xlink="http://www.w3.org/1999/xlink"
                                     xlink:href="#res-bad"></use>
                            </svg>
                        </div>
                        <div class="check_date"><p ><span >监督检查结果：</span>
                            <span class="shop_status_bad">差</span></p>
                            <p ><span >检查日期：</span> <span ></span>
                            </p></div>
                    </section>
                </section>
                <section class="shop_status_container">
                    <header >工商登记信息</header>
                    <ul >
                        <li ><p >企业名称</p>
                            <p ></p></li>
                        <li ><p >工商执照注册号</p>
                            <p ></p></li>
                        <li ><p >注册资本</p>
                            <p ></p></li>
                        <li ><p >注册地址</p>
                            <p ></p></li>
                        <li ><p >属地监管所</p>
                            <p ></p></li>
                        <li ><p >法定代表人</p>
                            <p ></p></li>
                        <li ><p >经营范围</p>
                            <p ></p></li>
                    </ul>
                </section>
                <section class="shop_status_container">
                    <header >餐饮许可证</header>
                    <ul >
                        <li ><p >营业范围</p>
                            <p ></p></li>
                        <li ><p >许可证有效期</p>
                            <p ></p></li>
                        <li ><p >许可证号</p>
                            <p ></p></li>
                        <li ><p >发证时间</p>
                            <p ></p></li>
                        <li ><p >发证机关</p>
                            <p ></p></li>
                    </ul>
                </section>
                <section  class="license_img shop_status_container">
                    <header >许可证书</header>
                    <div class="img_container">
                        <img src="//elm.cangdu.org/img/default.jpg"> <img data-v-22ee73da="" src="//elm.cangdu.org/img/default.jpg"></div>
                </section>
            </section>
        </section>
    </div>

</template>

<script>
    import Top from "@/components/Top";
    export default {
        name: "ShopSafe",
      components: {Top}
    }
</script>

<style scoped>
    #shopSafe {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 2222;
        background-color: white;
    }

    .shopSafe {
        width: 100%;
        height: 3rem;
        font-size: 1.1rem;
        position: relative;
        background-color: #3190e8;
        color: white;
    }

    header > img {
        width: 1.7rem;
        height: 1.7rem;
        position: absolute;
        left: 1rem;
        margin: auto;
        top: 0;
        bottom: 0;
    }

    .shopSafe > span:first-of-type {
        font-size: 1.5rem;
        position: absolute;
        display: block;
        width: 10rem;
        height: 4rem;
        line-height: 4rem;
        text-align: center;
        top: 0rem;
        left: 0;
        right: 0;
        margin: auto;
        font-weight: bold;
        /*left: 7.5rem;*/
    }
    .scroll_container {
        width: 100%;
        height: 100%;
        overflow-y: scroll;
    }
    .shop_status_container {
        background-color: #fff;
        margin-bottom: .4rem;
    }
    .shop_status_container header {
        line-height: 1.8rem;
        padding: 0 .6rem;
        border-bottom: .025rem solid #f1f1f1;
        font-size: .75rem;
        color: #333;
    }
    .shop_status_container .shop_statu_detail {
        display: flex;
        padding: .6rem;
    }
    .shop_status_container .shop_statu_detail svg{
        width: 2rem;
        height: 2rem;
        margin-right: .6rem;
    }
    .shop_status_container .shop_statu_detail .check_date span {
        font-size: .55rem;
        color: #666;
    }
    shop_status_container .shop_statu_detail .check_date .shop_status_bad {
        color: red;
    }
    .shop_status_container .shop_statu_detail .check_date span{
        font-size: .55rem;
        color: #666;
    }
    .shop_status_container .shop_statu_detail .check_date span {
        font-size: .55rem;
        color: #666;
    }
    .shop_status_container {
        background-color: #fff;
        margin-bottom: .4rem;
    }
    .shop_status_container header {
        line-height: 1.8rem;
        padding: 0 .6rem;
        border-bottom: .025rem solid #f1f1f1;
        font-size: .75rem;
        color: #333;
    }
    .shop_status_container ul {
        margin-left: 1rem;
        padding: .4rem 0;
    }
    .shop_status_container {
        background-color: #fff;
        margin-bottom: .4rem;
    }
    shop_status_container header{
        line-height: 1.8rem;
        padding: 0 .6rem;
        border-bottom: .025rem solid #f1f1f1;
        font-size: .75rem;
        color: #333;
    }
   .shop_status_container ul li {
        margin-bottom: .4rem;
    }

    .license_img {
        padding: .6rem;
        padding-bottom: 0.6rem;
        background-color: #fff;
        padding-bottom: 8rem;
    }
    .shop_status_container{
        background-color: #fff;
        margin-bottom: .4rem;
    }
    .shop_status_container header{
        line-height: 1.8rem;
        padding: 0 .6rem;
        border-bottom: .025rem solid #f1f1f1;
        font-size: .75rem;
        color: #333;
    }
    .license_img .img_container{
        background-color: #ebebeb;
    }
    .license_img .img_container img {
        width: 40%;
        height: auto;
        margin: .4rem;
        vertical-align: middle;
    }
</style>